<template>
  <div style="height:100%;" id='signup'>

    <drawer style="height:100%" width="200px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{ background:'#323c3c', width: '200px'}">

      <div id="x-header">

        <!-- <x-header slot="header"  :left-options="{backText: ''}">set empty back text</x-header> -->

        <x-header slot="header" style="" :title="info.name" :transition="headerTransition" @on-click-more="onClickMore">
          <div style="width: 30px;height: 30px;" slot='overwrite-left'>
            <a href="./#/racelist">
              <div class="left-arrow"></div>
            </a>
          </div>

          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>

        </x-header>

      </div>

      <!-- drawer content -->
      <div id='menu' slot="drawer">

        <group>

          <!-- <cell style="text-align:center" align-items='center' title='目录' @click.native="goAnchor('top')"> </cell> -->

          <cell :title="data" v-for="(data,index) in list" :index='index' :key="index" @click.native="goAnchor('#anchor-'+index)" is-link> </cell>

        </group>
      </div>

      <!-- main content -->

      <view-box ref="viewBox" body-padding-top="0" body-padding-bottom="20" scroll-bottom-offset='0'>

        <div class='top' style="">
          <x-img :src="banner" class="ximg-demo"></x-img>

          <card>
            <div slot="content" class="card-demo-flex card-demo-content01">

              <div class="vux-1px-r">
                <span>
                  <i class='fa fa-calendar'></i> {{info.date0}}</span>

              </div>

              <div>
                <span>
                  <i class="fa fa-map-marker"></i> {{info.address_name}} </span>

              </div>

            </div>
          </card>
        </div>

        <div id="content">

          <!-- <scroller height='-250' lock-x>   -->
          <ul>
            <li v-if='showContent' :id="'anchor-'+index" class="itemlist" v-for="(data,index) in list">
              <card :header="{title:data}">
                <div v-html="content[index]" slot="content" class="">
                </div>
              </card>

              <!-- <div>
                  <h2 class='game-txt-title'> {{data}} </h2>
                  <div v-html="content[index]"> </div>
                </div> -->

            </li>
          </ul>
          <!-- </scroller> -->

        </div>

        <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
        <transition @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')">
          <router-view class="router-view"></router-view>
        </transition>

      </view-box>

      <group v-if='isShowEvent' ref='pop' class='needsclick'>
        <popup-radio @on-hide='next2' class='needsclick' title="11" :options="options3" v-model="option5">
          <template slot-scope="props" slot="each-item">
            <!-- use scope="props" when vue < 2.5.0 -->
            <p class="clearfix">
              <span> {{ eventList[props.index].name}}</span>
              <span style="float:right;position: relative;top: 8px;font-weight: bold;">¥{{ eventList[props.index].rate}} </span>
              <br>
              <span style="color:#666;">{{getState(eventList[props.index])}}</span>
            </p>
          </template>
        </popup-radio>
      </group>

      <div id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition" @on-click-more="onClickMore">
          <span slot="overwrite-left" @click="drawerVisibility = !drawerVisibility">
            <x-icon style="color:#22ab28" class="icon-red" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
          </span>
          <a @click='next' class='needsclick rightbottom-button' v-bind:class="isDisabled ? 'disabled' : ''" slot="right">{{msg}}</a>

        </x-header>
      </div>

    </drawer>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

const STARTSTR = "进行中"; //进行中提示
const ENDSTR = "已经结束"; //结束提示
const UNSTARTSTR = "尚未开始"; //尚未开始提示

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import mixin from "@/common/js/mixin";
//import { host } from "@/api/config";
import CircleMenu from "@/common/components/mycirclemenu.vue";

import {
  PopupRadio,
  Scroller,
  XImg,
  Radio,
  ViewBox,
  XHeader,
  Swiper,
  SwiperItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Flexbox,
  FlexboxItem,
  Card,
  Drawer,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import Bus from "@/common/js/bus.js";

import {
  timeFormat,
  isIdNumber,
  setTitle,
  dateStringToDateTime,
  formatCity,
  toDecimal2
} from "@/common/js/main.js";
import { setTimeout } from "timers";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      isShowEvent: false,
      options3: [],
      option5: "",
      isDisabled: true, //
      showContent: false,
      content: [],
      info: {},
      raceId: 0,
      list: [],
      showModeValue: "push",
      showPlacementValue: "left",
      drawerVisibility: false,
      showPlacement: "left",
      showPlacementValue: "left",
      banner: "",
      eventList: [],
      msg: ""
    };
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  beforeCreate() {
    if (typeof this.$route.query.race_id == "undefined") {
      this.$router.push({ path: "racelist" });
    }
  },
  created() {
    window.localStorage.setItem("isQuery", "true");
    this.raceId = this.$route.query.race_id;
    window.localStorage.setItem("raceId", this.raceId);

    Bus.$emit("raceId", this.raceId);

    //mock
    this.getRaceInfo();
    this.getEventlist();
  },
  mounted() {
    let height = document.querySelector(".top").offsetHeight;
    //document.querySelector("#content").style.paddingTop = height + 90 + "px";
  },
  methods: {
    getState(a) {
      let startDate = dateStringToDateTime(a.reg_begin) || null;
      let endDate = dateStringToDateTime(a.reg_end) || null;

      if (!!a.reg_begin) {
        var startTime = timeFormat(a.reg_begin);
      }

      if (!!a.reg_end) {
        var endTime = timeFormat(a.reg_end) || null;
      }

      if (
        typeof this.inviteCode !== "undefined" &&
        this.inviteEventId == a.id
      ) {
        return "报名中(正在使用邀请码报名)";
      }

      if (!a.reg_begin && !a.reg_end) {
        //没有开始时间 没有结束时间  不设置限制
        if (a.state == "audit") {
          return STARTSTR + "，需要审核";
        } else if (a.state == "draw") {
          return STARTSTR + "，需要抽签";
        } else if (a.state == "normal") {
          if (a.remain <= 0) {
            if (a.allow_wait == 0) {
              return "已经报满了";
            } else if (a.allow_wait >= 1) {
              return "候补中，有 " + a.wait_count + " 人在候补";
            }
          } else {
            return STARTSTR;
          }
        }

        return STARTSTR;
      } else if (!a.reg_begin && a.reg_end) {
        //只有结束时间
        if (this.timeDate >= endDate) {
          //大于结束时间 返回已经结束
          return ENDSTR + "(报名截止时间:" + endTime + ")";
        } else {
          //小于结束时间 返回进行中
          if (a.state == "audit") {
            return STARTSTR + "，需要审核";
          } else if (a.state == "draw") {
            return STARTSTR + "，需要抽签";
          } else if (a.state == "normal") {
            if (a.remain <= 0) {
              if (a.allow_wait == 0) {
                return "已经报满了";
              } else if (a.allow_wait >= 1) {
                return "候补中，有 " + a.wait_count + " 人在候补";
              }
            } else {
              return STARTSTR;
            }
          }

          return STARTSTR;
        }
      } else if (a.reg_begin && !a.reg_end) {
        //只有开始时间
        if (this.timeDate >= startDate) {
          //大于开始时间 返回进行中
          if (a.state == "audit") {
            return "报名中，需要审核";
          } else if (a.state == "draw") {
            return "报名中，需要抽签";
          } else if (a.state == "normal") {
            if (a.remain <= 0) {
              if (a.allow_wait == 0) {
                return "已经报满了";
              } else if (a.allow_wait >= 1) {
                return "候补中，有 " + a.wait_count + " 人在候补";
              }
            } else {
              return STARTSTR;
            }
          }

          return STARTSTR;
        } else {
          //小于开始时间 返回还未开始
          return UNSTARTSTR + "(开始时间:" + startTime + ")";
        }
      } else if (a.reg_begin && a.reg_end) {
        //正常状态，有开始和结束时间
        // if (this.timeDate >= endDate) {
        //   return ENDSTR;
        // } else if (this.timeDate <= startDate) {
        //   return UNSTARTSTR;
        // }
        // return STARTSTR
        //只有开始时间
        //console.log(this.timeDate);
        if (this.timeDate <= startDate) {
          //当前时间小于开始时间 还没开始
          return UNSTARTSTR + "(开始时间:" + startTime + ")";
        } else if (this.timeDate >= endDate) {
          //当前时间大于结束事时间 已经结束
          return ENDSTR + "(截止时间:" + endTime + ")";
        } else {
          if (a.state == "audit") {
            return STARTSTR + "，需要审核";
          } else if (a.state == "draw") {
            return STARTSTR + "，需要抽签";
          } else if (a.state == "normal") {
            if (a.remain <= 0) {
              if (a.allow_wait == 0) {
                return "已经报满了";
              } else if (a.allow_wait >= 1) {
                return "候补中，有 " + a.wait_count + " 人在候补";
              }
            } else {
              return STARTSTR;
            }
          }
          return STARTSTR;
        }
      }
    },
    getEventlist() {
      this.axios
        .post(
          `${host}race/events`,
          qs.stringify({
            raceid: this.raceId
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            var _this = this;
            /*
            var 


            for (var i = 0; i < this.eventList.length; i++) {

              response.data.data[i].rate = response.data.data[i].price >> 0;
              this.options3.push(response.data.data[i].id);
              
              if (
                window.localStorage.getItem("invitationEventId") &&
                window.localStorage.getItem("invitationEventId") ==
                  response.data.data[i].id
              ) {
                this.isDisabled = false;
                this.msg = "正在使用邀请码报名";
              }

              let timeDate = new Date().valueOf();
              let startDate =
                dateStringToDateTime(response.data.data[i].reg_begin) || null;
              let endDate =
                dateStringToDateTime(response.data.data[i].reg_end) || null;
              if (!!startDate && timeDate < startDate) {
                //还没开始
                startLength++;
              } else if (!!endDate && timeDate > endDate) {
                //已经结束
                endLength++;
              }
            }

            if (startLength == response.data.data.length) {
              this.msg = "报名未开始";
              this.isDisabled = true;
            } else if (endLength == response.data.data.length) {
              this.msg = "报名结束";
              this.isDisabled = true;
            } else {
              this.msg = "报名中";
              this.isDisabled = false;
            }

            this.isShowEvent = true;

            setTimeout(() => {
              let array = document.querySelectorAll(
                ".weui-cells_radio .weui-check__label"
              );


              _this.eventList.map((item, index) => {


                if (!item.reg_able && item.key != _this.inviteEventId) {
                  //不能报名
                  array[index].className =
                    "weui-cell weui-cell_radio weui-check__label disable";
                } else if (!item.reg_able) {
                  array[index].className =
                    "weui-cell weui-cell_radio weui-check__label disable";
                }
              });
            }, 500);


            */

            this.eventList = response.data.data;
            this.eventList.forEach((item, index) => {
              item.shwoPrice = toDecimal2(item.price);
            });

            //如果邀请码项目在报名的赛事中 可通过
            let startLength = 0;
            let endLength = 0;

            for (var i = 0; i < this.eventList.length; i++) {
              response.data.data[i].rate = response.data.data[i].price >> 0;
              this.options3.push(response.data.data[i].id);

              if (
                window.localStorage.getItem("invitationEventId") &&
                window.localStorage.getItem("invitationEventId") ==
                  response.data.data[i].id
              ) {
                this.isDisabled = false;
                this.msg = "正在使用邀请码报名";
              }

              let timeDate = new Date().valueOf();
              let startDate =
                dateStringToDateTime(response.data.data[i].reg_begin) || null;
              let endDate =
                dateStringToDateTime(response.data.data[i].reg_end) || null;
              if (!!startDate && timeDate < startDate) {
                //还没开始
                startLength++;
              } else if (!!endDate && timeDate > endDate) {
                //已经结束
                endLength++;
              }
            }

            if (startLength == response.data.data.length) {
              this.msg = "报名未开始";
              this.isDisabled = true;
            } else if (endLength == response.data.data.length) {
              this.msg = "报名结束";
              this.isDisabled = true;
            } else {
              this.msg = "报名中";
              this.isDisabled = false;
            }

            this.isShowEvent = true;

            setTimeout(() => {
              let array = document.querySelectorAll(
                ".weui-cells_radio .weui-check__label"
              );
              //console.log(array)
              console.log(array)


              _this.eventList.map((item, index) => {
                console.log(array[index].className)
                //console.log(item)
                if (!item.reg_able && item.key != _this.inviteEventId) {
                  //不能报名
                  console.log(1)
                  array[index].className =
                    "weui-cell weui-cell_radio weui-check__label disable";
                } else if (!item.reg_able) {
                  console.log(2)
                  array[index].className =
                    "weui-cell weui-cell_radio weui-check__label disable";
                }else{
                  console.log(3)
                    array[index].className ="weui-cell weui-cell_radio weui-check__label";
                }
              });
            }, 2000);

            //console.warn(this.eventList)

            //console.log(this.msg);

            // response.data.data.map((item, index) => {
            //   if(window.localStorage.getItem('invitationEventId')&&window.localStorage.getItem('invitationEventId')==item.id){
            //       isDisabled=false
            //       return
            //   }
            //   if(!isDisabled){

            //   }
            //console.log(item.id)
            // //如果有一个项目不可报名
            // if (!item.reg_able) {
            //   this.isDisabled = true;
            //   return;
            // }
            // this.isDisabled = false;
            //  });
            //console.log(response.data.data)
            //response.data.data;
          }
        });
    },
    getPage(id, name) {
      axios
        .get(`${host}page/query`, {
          params: {
            id: `${id}`
          }
        })
        .then(
          response => {
            if (response.data.code == "200") {
              if (name == "竞赛规程" && !!this.info.rule) {
                this.content[0] = response.data.data.content;
              } else if ((name = "报名须知" && !!this.info.notes)) {
                this.content[1] = response.data.data.content;
              } else {
                this.content.push(response.data.data.content);
              }
              //console.log(response.data.data);
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    getRaceInfo() {
      let _this = this;
      axios
        .get(`${host}race/show`, {
          params: {
            raceid: `${this.raceId}`
          }
        })
        .then(
          response => {
            if (response.data.code == "200") {
              this.info = response.data.data;
              setTitle(this.info.name);
              console.log(this.info.time);
              this.info.date0 =
                this.info.time.split(" ")[0] +
                " " +
                this.info.time.split(" ")[1].split(":")[0] +
                ":" +
                this.info.time.split(" ")[1].split(":")[1];
              //this.info.date1 = this.info.time.split(" ")[1];
              if (!!this.info.city) {
                //获取城市名称
                console.log(formatCity(this.info.city));
                this.info.address_name =
                  formatCity(this.info.city) + this.info.address;
              } else {
                this.info.address_name = this.info.address;
              }

              this.banner =
                this.info.cover || this.info.header || this.info.footer;

              let getpagelist = [];
              function getpageAccount(id, name) {
                return axios.get(`${host}page/query`, {
                  params: {
                    id: `${id}`
                  }
                });
              }
              if (!!this.info.rule) {
                this.list.push("竞赛规程");
                getpagelist.push(getpageAccount(this.info.rule, "竞赛规程"));
              }

              if (!!this.info.notes) {
                this.list.push("报名须知");
                getpagelist.push(getpageAccount(this.info.notes, "报名须知"));
              }

              if (!!this.info.disclaimer) {
                window.localStorage.setItem(
                  "disclaimerID",
                  this.info.disclaimer
                );
              }

              axios.all(getpagelist).then(
                axios.spread(function() {
                  // Both requests are now complete
                  for (let i = 0; i < arguments.length; i++) {
                    _this.content.push(arguments[i].data.data.content);
                  }
                  _this.showContent = true;
                })
              );
            } else {
              _this.$vux.toast.show({
                text: response.data.msg,
                type: "warn"
              });
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    next2() {
      //关闭弹出列表 如果有选中的值就跳转
      if (!!this.option5) {
        this.eventList.forEach((item, index) => {
          if (item.id == this.option5 && !!item.url) {
            window.location.href = item.url;
            return;
          }
        });

        window.localStorage.setItem("isTeam", "fasle");
        this.eventList.forEach((item, inddex) => {
          if (item.id == this.option5) {
            if (item.team == 1) {
              window.localStorage.setItem("isTeam", "true");
            } else {
              window.localStorage.setItem("isTeam", "false");
            }
          }
        });

        window.localStorage.setItem("eventId", this.option5);

        if (!!this.info.disclaimer) {
          this.$router.push({ path: "disclaimer" });
        } else {
          //如果是团队报名
          if (window.localStorage.getItem("isTeam") == "true") {
            this.$router.push({ path: "teamlist" });
          } else {
            this.$router.push({ path: "certificate/identity" });
          }
        }

        // if (!!this.info.disclaimer) {
        //   //如果有就跳免责申明
        //   window.localStorage.setItem("eventId", this.option5);
        //   this.$router.push({ path: "disclaimer" });
        // } else {
        //   //如果没有就跳填身份
        //   this.$router.push({ path: "disclaimer" });
        // }
      }
    },
    next() {
      var _this = this;
      var clock = true;
      this.eventList.map((item, index) => {
        //如果邀请码项目id于赛事中的任意一个项目匹配则可以报名
        if (item.id == window.localStorage.getItem("invitationEventId")) {
          clock = false;
        }
      });
      if (this.isDisabled && clock) {
        this.$vux.toast.show({
          text: "报名未开始或已结束",
          type: "cancel"
        });
        return;
      }
      //一键报名
      //存一下raceid
      window.localStorage.setItem("raceId", this.raceId);
      //存储赛事名称
      window.localStorage.setItem("project", this.info.name);

      _this.$refs.pop.$children[0].$el.click();

      // setTimeout(function() {

      //   console.log(_this.option5)
      //   if (!!_this.info.disclaimer) {
      //     //如果有就跳免责申明
      //     window.localStorage.setItem('eventId',_this.option5);
      //     _this.$router.push({ path: "disclaimer" });
      //   } else {
      //     //如果没有就跳填生份
      //     _this.$router.push({ path: "disclaimer" });
      //   }
      // }, 500);

      //_this.$refs.pop.$children[0].$el.click();

      //this.$router.push({ path: "disclaimer" });
      //console.log(_this.$refs.pop.$children[0].$el);
    },
    goAnchor(selector) {
      let box = document.querySelector("#vux_view_box_body");
      if (selector == "top") {
        box.scrollTop = 0;
      } else {
        var anchor = this.$el.querySelector(selector);
        box.scrollTop = anchor.offsetTop;
      }
      this.drawerVisibility = false;
    },
    onClickMore() {
      this.drawerVisibility = true;
    },
    onShowModeChange(val) {
      /** hide drawer before changing showMode **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showModeValue = val;
      }, 400);
    },
    onPlacementChange(val) {
      /** hide drawer before changing position **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showPlacementValue = val;
      }, 400);
    }
  },
  directives: {
    TransferDom
  },
  components: {
    PopupRadio,
    Radio,
    Actionsheet,
    CircleMenu,
    Scroller,
    XImg,
    ViewBox,
    XHeader,
    Swiper,
    SwiperItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Card,
    Drawer,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#signup .vux-drawer-body {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

#signup .weui-tab {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.flexwrapper {
  .flex-demo {
    width: 90%;
    background-clip: padding-box;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
  .content {
    padding-left: 20px;
    padding-right: 20px;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: black;
      margin: 10px 0 10px 0;
      line-height: 1.2;
    }
    .time {
      font-size: 12px;
      color: #2179cc;
      margin-bottom: 10px;
    }
  }
  .button {
    height: 34px;
    line-height: 34px;
  }

  a {
    touch-action: none;
  }
}

#signup .weui-panel {
  margin-top: 0;
}

#signup .card-demo-flex {
  display: flex;
}
#signup .card-demo-content01 {
  padding: 10px 0;
}
#signup .card-padding {
  padding: 15px;
}
#signup .card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}

#content h2 {
  margin: 0px;
  text-align: left;
}

#signup .vux-header-left {
  overflow: hidden;
  height: 20px;
}

// #signup #menu .weui-cells .vux-label {
//   color: black;
// }

#signup .vux-drawer-content {
  //display: table;
  //padding-top: 100px;
}

#signup #menu {
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  padding-top: 100px;
}

body {
  background-color: #fbf9fe;
}
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.demo-icon-22 {
  font-family: "vux-demo";
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #f70968;
}
.vux-demo-tabbar
  .weui-tabbar_item.weui-bar__item_on
  .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #f70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0 !important;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
@font-face {
  font-family: "vux-demo"; /* project id 70323 */
  src: url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot");
  src: url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot?#iefix")
      format("embedded-opentype"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.woff") format("woff"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.ttf") format("truetype"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.svg#iconfont")
      format("svg");
}
.demo-icon {
  font-family: "vux-demo";
  font-size: 20px;
  color: #04be02;
}
.demo-icon-big {
  font-size: 28px;
}
.demo-icon:before {
  content: attr(icon);
}
.router-view {
  width: 100%;
  top: 46px;
}

#signup .vux-no-group-title {
  margin-top: 0;
  background: none;
}

#signup #menu .weui-cells:before,
#signup #menu .weui-cell:before,
#signup #menu .weui-cells:after {
  border-top: 1px solid #323c3c;
  border-bottom: 1px solid #323c3c;
}

#signup .vux-x-img {
  width: 100%;
}

#signup .vux-card-content img {
  width: 100%;
}

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}

.footerBanner {
  margin-bottom: 0px;
}

// #content ul li {
//   height: 100vh;
// }

#signup .vux-header .vux-header-right {
  font-size: 18px;
}

#content .game-txt-title {
  height: 40px;
  line-height: 40px;
  background-color: #f2f5fa;
  color: #8f8e94;
  padding: 0 20px;
  font-size: 14px;
  font-weight: normal;
}

#content img {
  width: 100%;
}

#menu .weui-cells .vux-label {
  color: white;
}

#menu .vux-tap-active:active {
  background-color: rgba(0, 0, 0, 0);
}

#signup .procedure .title {
  margin: 10px;
  width: auto;
}

#signup #content .title .top-title {
  text-align: center;
  font-weight: 400;
  // font-size: 17px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  word-wrap: break-word;
  word-break: break-all;
}

#signup #content .weui-media-box__info {
  margin-top: 15px;
  padding-bottom: 5px;
  font-size: 13px;
  color: #745e5e;
  line-height: 1em;
  list-style: none;
  overflow: hidden;
}

#signup #content .weui-media-box__info__meta_extra {
  padding-left: 1em;
  border-left: 1px solid #745e5e;
}

#signup #content .weui-media-box__info__meta {
  float: left;
  padding-right: 1em;
}

#signup #content {
  margin-bottom: 20px;
  //overflow-x: hidden;
  //overflow-y: scroll;
  width: 100%;
  //height: 100%;
}

#signup .card-demo-flex span {
  padding-left: 15px;
  padding-right: 15px;
}

#signup #content p {
  margin: 10px 0 10px;
  white-space: normal;
  color: #666;
  font-size: 13px;
  line-height: 200%;
  // overflow: hidden;
  // text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
  // margin: 8px;
}

#signup #content span {
  color: #666;
  font-size: 13px;
  line-height: 160%;
  //padding-left: 15px;
  //padding-right: 15px;
  //margin: 10px;
}

#signup #content .imgs {
  width: 100%;
  // height: 100px;
  display: table-cell;
  vertical-align: middle;
  // text-align: center;
  padding: 10px;
}

#signup #content img {
  width: 100%;
}

//h1标签
#signup #content {
  color: #666;
  box-sizing: border-box;
  h1 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 36px;
    margin-bottom: 10px;
  }
  h2 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 30px;
    margin-bottom: 10px;
  }
  h3 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 24px;
    margin-bottom: 10px;
  }
  h4 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 18px;
    margin-bottom: 10px;
  }
  h5 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 14px;
    margin-bottom: 10px;
  }
  h6 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 12px;
    margin-bottom: 10px;
  }
  ol,
  ul {
    color: #666;
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
  }
  li {
    height:auto;
    display: list-item;
    text-align: -webkit-match-parent;
  }
  button {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.05);
    &:hover,
    &:focus {
      color: #333;
      text-decoration: none;
      background-position: 0 -15px;
      -webkit-transition: background-position 0.1s linear;
      -moz-transition: background-position 0.1s linear;
      -o-transition: background-position 0.1s linear;
      transition: background-position 0.1s linear;
    }
  }
  a {
    color: #666;
    text-decoration: none;
    line-height: 1.75;
    font-size: 14px;
    &:hover {
      color: #c81623;
    }
    strong {
      font-weight: 700;
    }
  }
}

#signup #content table {
  width: 100%;
  max-width: 100%;
  white-space: pre;
  border-spacing: 0;
  border-collapse: collapse;
  word-break: break-all;
  word-wrap: break-word;
}

#signup #contenttable thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

#signup #content .tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

#signup #content thead > tr > th {
  border-bottom-width: 2px;
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  text-align: left;
  font-weight: bold;
  border: 1px solid #ddd;
  // display: table-cell;
}

#signup #content tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

#signup #content tbody > tr > td {
  border: 1px solid #ddd;
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

#signup #content tbody > tr > th {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

#signup .card-demo-flex {
  line-height: 1.6;
}

#signup .weui-panel__bd {
  padding-left: 15px;
  padding-right: 15px;
}

#signup #content .vux-card-content {
  padding-bottom: 50px;
}

#signup #content td p {
  margin: 0;
}

.disable {
  pointer-events: none;
}
</style>






